<template>
  <div id="project">
    <hry-header></hry-header>
    <md-tab-bar v-model="info.id" :items="items" @change="changeTab" />
    <div class="wrapper">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="$_onEndReached"
        @refreshing="changeTab"
      >
        <div class="empty" v-if="newInfo.length === 0">
          <img src="@/assets/img/empty.png" alt="" />
        </div>
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          roller-color="#FD7400"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <new-card
          v-for="(item, index) in newInfo"
          :key="index"
          :cardInfo="item"
        ></new-card>
        <md-scroll-view-more slot="more" :is-finished="isFinished">
        </md-scroll-view-more>
      </md-scroll-view>
    </div>
  </div>
</template>

<script>
import {
  TabBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
// import { Modal } from "ant-design-vue";
export default {
  name: "new",
  components: {
    newCard: () => import("@/components/newCard/mobileIndex"),
    hryHeader: () => import("@/components/header/mobileIndex"),
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [TabBar.name]: TabBar
  },
  data() {
    return {
      isFinished: false,
      items: [
        { name: "0", label: "全部" },
        { name: "3", label: "娱乐资讯" },
        { name: "1", label: "项目动态" },
        { name: "2", label: "平台公告" }
      ],
      newInfo: [],
      info: {
        id: "0",
        curpage: 1
      },
      totalPage: 1
    };
  },
  methods: {
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.info.curpage++;
      this.getNewList();
    },
    changeTab() {
      // let that = this;
      this.$nextTick(() => {
        // if (this.info.id === "1" && !this.isValidate) {
        //   Modal.confirm({
        //     title: "尊敬的用户：",
        //     content:
        //       "您暂无权限查看此页面，请立即前往个人中心，完善身份信息后方可查看！",
        //     okText: "去认证",
        //     cancelText: "取消",
        //     onOk() {
        //       that.$router.push({ name: "personAuthentication" });
        //     }
        //   });
        // }
        this.info.curpage = 1;
        this.isFinished = false;
        this.getNewList(true);
      });
    },
    goToDetail(id) {
      this.$router.push({ name: "projectDetail", params: { id: id } });
    },
    getNewList(refresh) {
      this.$ajax
        .get(this.$api.getNews, this.info)
        .then(res => {
          if (refresh) {
            this.newInfo = res.data.list;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.newInfo.push.apply(this.newInfo, res.data.list);
          }
          this.totalPage = res.data.total_page;
          if (this.info.curpage === this.totalPage) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  computed: {
    isValidate() {
      return this.$store.state.isValidate;
    }
  }
};
</script>

<style scoped lang="less">
#project {
  height: 100%;
}
.wrapper {
  height: calc(100% - 170px);
}
</style>
